<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Multi-Broadcasters and Many Viewers using RTCMultiConnection ® Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="//cdn.webrtc-experiment.com/style.css">
    <style>
    audio,
    video {
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        vertical-align: top;
    }
    
    input {
        border: 1px solid #d9d9d9;
        border-radius: 1px;
        font-size: 2em;
        margin: .2em;
        width: 20%;
    }
    
    .setup {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        font-size: 102%;
        height: 47px;
        margin-left: -9px;
        margin-top: 8px;
        position: absolute;
    }
    
    p {
        padding: 1em;
    }
    
    li {
        border-bottom: 1px solid rgb(189, 189, 189);
        border-left: 1px solid rgb(189, 189, 189);
        padding: .5em;
    }
    </style>
    <script>
    document.createElement('article');
    document.createElement('footer');
    </script>

    <!-- scripts used for WebRTC connections -->
    <script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
    <script src="//cdn.webrtc-experiment.com/firebase.js"></script>
</head>

<body>
    <article>
        <header style="text-align: center;">
            <h1>Multi-Broadcasters and Many Viewers using <a href="http://www.rtcmulticonnection.org/docs/">RTCMultiConnection.js</a>!</h1>
            <p>
                <a href="https://www.webrtc-experiment.com/">HOME</a>
                <span> &copy; </span>
                <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
                <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
                <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
            </p>
        </header>

        <div class="github-stargazers"></div>

        <!-- just copy this <section> and next script -->
        <section class="experiment">
            <h2>Your Role?</h2>
            <br />
            <br />
            <select>
                <option>Broadcaster</option>
                <option>Anonymous Viewer</option>
                <option>Room Moderator</option>
            </select>
            <button>Continue</button>
            <br />

            <div id="videos"></div>
        </section>
        <section class="experiment">
            <h2>How it works?</h2>
            <ol>
                <li>There can be random number of broadcasters.</li>
                <li>All broadcasters will be interconnected!</li>
                <li>All broadcasters can see/talk with each other!</li>
                <li>There can be random number of anonymous viewers.</li>
                <li>All viewers can watch/listen videos from all broadcasters!</li>
            </ol>
            <h2>Real-life scenarios?</h2>
            <ol>
                <li>5 CEOs can setup a presentation with many employees!</li>
                <li>5 Teachers can teach many students in the same room!</li>
                <li>Two ore more doctors can inspect two or more patients while LIVE teaching many students!</li>
            </ol>
            <h2>How to use it?</h2>
            <ol>
                <li>1st Tab: There MUST always be a room-moderator. Select "Room Moderator" and click "continue".</li>
                <li>2nd Tab: Select "Anonymous Viewer" if you want to anonymously watch/listen all videos.</li>
                <li>3rd Tab: Select "Broadcaster" if you want to setup two-way or multi-directional video chat with all other broadcasters.</li>
            </ol>
        </section>

        <script>
        var select = document.querySelector('select');
        var button = document.querySelector('button');
        var videos = document.querySelector('#videos');

        button.onclick = function() {
            this.disabled = true;

            var role = select.value;

            window.connection = new RTCMultiConnection();

            // dont-override-session allows you force RTCMultiConnection
            // to not override default session of participants;
            // by default, session is always overridden and set to the session coming from initiator!
            connection.dontOverrideSession = true;

            connection.session = {
                audio: true,
                video: true,
                oneway: role == 'Anonymous Viewer'
            };

            connection.onstream = function(e) {
                videos.appendChild(e.mediaElement);

                if (e.type == 'remote') {
                    // because "viewer" joined room as "oneway:true"
                    // initiator will NEVER share participants
                    // to manually ask for participants;
                    // call "askToShareParticipants" method.
                    connection.askToShareParticipants();
                }

                // if you're moderator
                // if stream-type is 'remote'
                // if target user is broadcaster!
                if (connection.isInitiator && e.type == 'remote' && !e.session.oneway) {
                    // call "shareParticipants" to manually share participants with all connected users!
                    connection.shareParticipants({
                        dontShareWith: e.userid
                    });
                }
            };

            connection.onNewSession = function(session) {
                if (role == 'Anonymous Viewer') {
                    session.join({
                        oneway: true
                    });
                }

                if (role == 'Broadcaster') {
                    session.join();
                }
            };

            if (role == 'Room Moderator')
                connection.open({
                    sessionid: connection.channel,
                    captureUserMediaOnDemand: false
                });
            else
                connection.connect(connection.channel);
        };
        </script>

        <section class="experiment">
            <h2 class="header" id="feedback">Feedback</h2>
            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
            <small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
        </section>

        <section class="experiment own-widgets latest-commits">
            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a>
            </h2>
            <div id="github-commits"></div>
        </section>
    </article>

    <a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>

    <footer>
        <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> and
        <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> ©
        <a href="mailto:muazkh@gmail.com" target="_blank">Muaz Khan</a>:
        <a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>
    </footer>

    <!-- commits.js is useless for you! -->
    <script src="//cdn.webrtc-experiment.com/commits.js" async>
    </script>
</body>

</html>